


//box-sizing

@mixin box-sizing {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}


// form input 
@mixin input ($w: 100%, $h: 2.2rem,$fs: .75rem){
	-webkit-appearance:none;
	@include box-sizing;
	width: $w;
	height: $h;
	border-radius: .15rem;
	border: 1px solid #d5d4d0;
	font-size: $fs;
	padding-left: .4rem;
	box-shadow: inset 0 .05rem .1rem 0 #dedbdd;
	&::-webkit-input-placeholder{
		color: #ccc;
	}	
}

// arr-base

@mixin triangle-up ($w: .2rem, $h: .2rem, $color: #7f7f7f) {
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent $color transparent;
	border-width: $w $h;
}

@mixin triangle-down ($w: .2rem, $h: .2rem, $color: #7f7f7f) {
	width: 0;
	height: 0;
	border-style: solid;
	border-color: $color transparent transparent transparent;
	border-width: $w $h;
}

@mixin triangle-left ($w: .2rem, $h: .2rem, $color: #7f7f7f) {
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent $color transparent transparent;
	border-width: $w $h;
}
@mixin triangle-right ($w: .2rem, $h: .2rem, $color: #7f7f7f) {
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent $color;
	border-width: $w $h;
}

@mixin cutxt {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

%cutxt {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@mixin mult-cutxt ($line:2){
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp:$line;
	-webkit-box-orient:vertical;
}


//

// placeholder 



// autoCenter
%autoCenter {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}


%base-title{
	margin-left: .125rem;
	height: 1.2rem;
	font-size: .7rem;
	line-height: 1.2rem;
	color: $red;
	border-bottom: 0.05rem solid $red;
	font-weight: normal;
	padding-left: .25rem;
}

